<!-- 产品的生命周期 -->
<template>
  <div class="tabs-container">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      active-text-color="#5cc4a7"
      text-color="#b4b4b4"
      background-color="#fff"
    >
      <el-menu-item index="1">填报导航</el-menu-item>

      <el-menu-item index="2">目标与范围定义</el-menu-item>
      <el-menu-item index="3">生命周期清单</el-menu-item>
      <el-menu-item index="4">产品结果分析</el-menu-item>
      <el-menu-item index="5">碳足迹研究报告</el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
  import { ref, reactive } from "vue";
  const activeIndex = ref("1");

  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath);
  };
</script>
<style lang="scss" scoped>
  .tabs-container {
    $inactive-text-color: #b4b4b4;
    $active-border-color: #5cc4a7;
    ::v-deep {
      .el-menu-item {
        font-size: 20px;
        color: $inactive-text-color;
        font-weight: 500;
      }

      .el-menu-item.is-active  {
        border-bottom: 4px solid $active-border-color;
      }
      .el-menu-item:hover {
        background: transparent;
      }
      .el-menu-item:focus {
        background: transparent;
      }
    }
  }
</style>
